//- 先去这个pug文件中找
extends ../commons/commons.pug

block append pageStyle
	link(href="${relativePath}/static/css/shopping/shopIndex.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/newOrder.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/foundation.min.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/foundation-datepicker.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/fileUpload.css" rel="stylesheet" type="text/css")

block content
	//- 新建订单
	div.newOrderContent
		p.notice 
			| 说明   |   *官方保障您线上交易安全，且不收取佣金，80%的欺诈都有线下交易所致，请勿线下交易
			i.del.f
		h3.orderTitle 填写租赁需求
		//- 添加表单
		form#newOrder
			div.restBox
				input.hiddenData(type="hidden" name="hiddenData")
				input.equipType(type="hidden" name="equipType")
				input.fileName(type="hidden" name="fileName")
				input.parent_id(type="hidden" name="parentId")
				input.hiddenTxt(type="hidden" name="hiddenTxt")
				div.row
					label.leftLabel 租赁类型：
					select#designsType.seleStyle.designsType(name="designsType")
						option 请选择
				div.row
					label.leftLabel 货物类型：
					input.txt.designsType.jgMode( type="text" name="goodsType")
				div.row.allcount
					label.leftLabel 合计出价：
					input.txt.designallcount(type="text" name="designallcount")
				div.row.sgTimereduce
					label.leftLabel 租赁时间：
					input.txt#sgtimeone.fl(type="text" readonly name="sgTime" placeholder="请选择")
					span.reduce.fl -
					input.txt#sgtimetwo.fl(type="text" readonly name="sgTimetwo" placeholder="请选择")
				div.row.sgTimereduce
					label.leftLabel 起点终点：
					input.txt.fl(type="text" name="star")
					span.reduce.fl -
					input.txt.fl(type="text" name="end")
				div.row
					label.leftLabel 抢单有效时间：
					select.seleStyle.seleStyle02.txt(name="effectTime")
						option 1小时
						option 2小时
						option 3小时
						option 4小时
						option 8小时
						option 12小时
				div.row
					label.leftLabel 服务方：
					div.serviceList
						input.txt(type="text" placeholder="可多选" readonly name="service")
						div.checkBox.fl
							label
								input.supplier(type="checkbox" name="supplier")
								|  lalal

				div.row.textArea
					label.leftLabel 留言：
					textarea.leaveMsg(rows="2" cols="20" name="leaveMsg")
				input(type="hidden",name="order_img")
		div.formsBox
			div.row
				label.leftLabel 上传效果图：
				form#newOrderImg
					div#upImgs.fl
						span.arm *请上传至少一张定制物品的效果图，支持jpg、png、jpeg、bmp格式，单个图片小于4M
						div.z_photo.upimg-div.clear
							section.z_file.fl
								img(src="${relativePath}/static/imgs/addImg.png").add-img
								input(type="file" name="file" id="orderImg" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple="multiple" )
			div.row
				label.leftLabel 附件：
				form#fileForm
					span.upImgBtn.fl 上传附件
						input#fileId.file(type="file" name="file")
					span.produceTxt.fl *附件为cdr文件，请添加大小不超过5M的cdr文件作为附件
				div.fileName
		//- 下一步按钮
		div.nextBtn 下一步


block append pageScript
	script(src="${relativePath}/static/js/jquery.validate.min.js")
	script(src="${relativePath}/static/js/messages_zh.js")
	script(src="${relativePath}/static/js/newOrder.js")

	script.
		var TYPEID;
		$(function() {
			$("input").not(".designallcount").focus(function() {
				$(this).css("background-color","rgba(255,255,255,1");
			})
			$("input.designallcount").focus(function() {
				$(this).css("background","url(${relativePath}/static/imgs/money.png) no-repeat 9px center");
			})
			
			//- 选择交货时间
			$('.deliveryTime').fdatepicker({
				format: 'yyyy-mm-dd',
				onRender: function (date) {
					var nowTemp = new Date();
					var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
					return date.valueOf() < now.valueOf() ? 'disabled' : '';
				}
			});
			//- 选择施工时间
			var nowTemp = new Date();
			var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
			var checkin = $('#sgtimeone').fdatepicker({
				format: 'yyyy-mm-dd',
				onRender: function (date) {
					return date.valueOf() < now.valueOf() ? 'disabled' : '';
				}
			}).on('changeDate', function (ev) {
				if (ev.date.valueOf() > checkout.date.valueOf()) {
					var newDate = new Date(ev.date)
					newDate.setDate(newDate.getDate() + 1);
					checkout.update(newDate);
				}
				checkin.hide();
				$('#sgtimetwo')[0].focus();
			}).data('datepicker');
			var checkout = $('#sgtimetwo').fdatepicker({
				format: 'yyyy-mm-dd',
				onRender: function (date) {
					return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
				}
			}).on('changeDate', function (ev) {
				checkout.hide();
			}).data('datepicker');

			//- 点击通知关闭
			$(".notice .del").click(function() {
				$(".notice").hide();
			})

			//- 安装类型列表
			$.post(shopIp+"/category/subCategory",{
				userToken:token,
				type_id:4,
				category_id:thisRequest.cate_id,
				parent_id:thisRequest.parent_id
			},function(data) {
				var list = data.data.goods_category;
				for(var i=0;i<list.length;i++) {
					var ele = '<option value="'+list[i].id+'">'+list[i].name+'</option>';
					$("#designsType").append(ele);
				}
			})

			$("#designsType").change(function() {
				TYPEID = $(this).val();
				$(".equipType").val($("#designsType option:selected").text());
			});

			//- 鼠标经过服务方下拉显示
			var serviceArr = [];
			var serviceArrId = [];
			$(".serviceList .txt").mousedown(function() {
				if($("#designsType").val() == "请选择") {
					layer.msg("请先选择租赁类型");
				} else{
					$(".serviceList .checkBox").html("");
					$(".serviceList .checkBox").show();
					$.post(shopIp+"/Category/category_type",{
						userToken:token,
						category_id:TYPEID,
						member_id:thisRequest.id,
						type:4
					},function(data) {
						var cateList = data.data;
						//- 多选多个服务方
						//console.log(cateList);
						for(var i=0;i<cateList.length;i++) {
							var labelEle = '<label><input class=upplier" type="checkbox" name="supplier" id="'+cateList[i].member_id+'" value="'+cateList[i].company_name+'"/>'+'&nbsp;'+cateList[i].company_name+'</label>';
							$(".serviceList .checkBox").append(labelEle);
						}
					})

				}
			})
			$(".serviceList .checkBox").mouseleave(function() {
				$(this).hide();
				$("input[name='supplier']:checked").each(function() {
					serviceArr.push($(this).val());
					serviceArrId.push($(this).attr("id"))
				})
				$("input[name='service']").val(serviceArr.splice(","));
				$(".hiddenData").val(serviceArrId.splice(","));
			})

			//- 表单验证
			var validator = $("#newOrder").validate({
					rules: {
						designsType:{
							required:true
						},
						designallcount:{
							required : true,
							number:true
						},
						deliveryTime:{
							required:true,
						},
						service:{
							required:true
						},
						goodsType:{
							required:true
						}
					},
					messages : {
						designsType:{
							required:"请选择设计类型"
						},
						designallcount:{
							required:"请填写出价"
						},
						deliveryTime:{
							required:"请选择交货时间"
						},
						service:{
							required:"请选择服务方"
						},
						goodsType:{
							required:"请输入货物类型"
						}
				    },
					errorPlacement: function(error, element) {  
						error.appendTo(element.closest(".row"));
						//- if(element[name="area"]) {
						//- 	error.after(element.closest("#qu"));
						//- }
					}
				});
			//- 点击下一步
			$(".nextBtn").click(function() {
				$(".parent_id").val(thisRequest.parent_id);
				//- 效果图
				var imgsArr = [];
				$(".z_photo img").not(".add-img").each(function(){
					imgsArr.push($(this).attr("src"));
				})
				if(validator.form()) {
					if($("#designsType").val() == "请选择") {
						layer.msg("请选择租赁类型");
					}else if($(".sgtimeone").val() == "" || $(".sgtimetwo").val() == "") {
						layer.msg("请选择租赁时间");
					}else if($(".star").val() == "" || $(".end").val() == "") {
						layer.msg("请输入起点终点");
					}else{
						$.post(shopIp+"/buy/orderPreview",{
							userToken:token,
							preview_data:$("#newOrder").serializeArray(),
							order_files:$(".hiddenTxt").val(),
							order_img:imgsArr,
							type:4,
							parent_id:thisRequest.parent_id
						},function(data) {
							window.location.href="carnewOrder.html?id="+data.data.id;
						})
					}
				}
			})
		})
		